<template>
  <view>
    <u-navbar :background="{ background: '' }" back-icon-color="#fff" title-color="#fff" title="知名专家" :immersive="true" :border-bottom="false"></u-navbar>
    <view class="">
      <image src="https://wenzhen.fuerle168.com/static/user/f0.png" mode="widthFix" style="width: 100%"></image>
    </view>
    <!-- 名老中医 -->
    <view class="" style="width: 100%; background: linear-gradient(180deg, #fff0d6 0%, #fff5e6 99%)">
      <view class="" style="display: flex; align-items: center; justify-content: center; padding-top: 34rpx">
        <view class="" style="display: flex; align-items: center; margin-right: 11rpx">
          <view class="on" style="margin-right: 10rpx"></view>
          <view class="on1" style="margin-right: 10rpx"></view>
          <view class="on2"></view>
        </view>
        <view class="" style="font-size: 36rpx; color: #ffa32d; font-weight: bold; margin-right: 11rpx">名老中医</view>
        <view class="" style="display: flex; align-items: center">
          <view class="on2" style="margin-right: 10rpx"></view>
          <view class="on1" style="margin-right: 10rpx"></view>
          <view class="on"></view>
        </view>
      </view>
      <view class="" style="font-size: 26rpx; color: #ffb454; text-align: center; padding-top: 10rpx">卫健委官方评选 国内顶级专家</view>
      <view class="">
        <scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y" style="white-space: nowrap">
          <view class="" style="display: flex; align-items: center">
            <view
              class=""
              style="width: 250rpx; text-align: center; background: #fff; border-radius: 20rpx; margin: 24rpx; padding: 43rpx 16rpx 35rpx 16rpx; flex-shrink: 0"
              v-for="(i, k) in getlist"
              :key="k"
              @tap="tech(i.doctor_id)"
            >
              <view class="" style="position: relative">
                <image :src="i.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border-radius: 50%"></image>
                <view
                  class=""
                  style="
                    width: 64rpx;
                    height: 34rpx;
                    background: #ff7251;
                    border-radius: 17rpx;
                    font-size: 22rpx;
                    color: #fff;
                    text-align: center;
                    line-height: 34rpx;
                    position: absolute;
                    top: 89rpx;
                    left: 35%;
                  "
                >
                  {{ i.level_name }}
                </view>
              </view>
              <view class="" style="display: flex; font-size: 28rpx; align-items: center; justify-content: center; padding-top: 22rpx">
                <view class="">
                  {{ i.doctor_name }}
                </view>
                <view class="" style="font-size: 24rpx; color: #666666; padding-left: 12rpx">
                  {{ i.doctor_title }}
                </view>
              </view>
              <view
                class=""
                style="
                  font-size: 24rpx;
                  color: #666666;
                  text-align: center;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  width: 240rpx;
                "
              >
                {{ i.hospital_name }}
              </view>
              <view class="btn" style="margin: 28rpx auto; background: #ffede8">
                {{ i.lable }}
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="" style="font-size: 28rpx; color: #ff9d27; text-align: center; padding-bottom: 25rpx">查看全部></view>
      </view>
    </view>
    <!-- 皮肤科 -->
    <view :class="i.color == 0 ? 'ns' : i.color == 1 ? 'ns1' : 'ns2'" style="margin: 26rpx 28rpx; border-radius: 20rpx; padding-bottom: 34rpx" v-for="(i, k) in list" :key="k">
      <view class="" style="font-size: 36rpx; color: #fff; font-weight: bold; text-align: center; padding-top: 34rpx">
        {{ i.department_name }}
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 20rpx 28rpx; font-size: 28rpx; color: #fff">
        <view class="">{{ i.department_name }}明星明细</view>
        <view class="">
          <u-icon name="arrow-right" color="#fff" size="26" label="全部" label-pos="left" label-color="#fff"></u-icon>
        </view>
      </view>
      <!-- 许三多 -->
      <view
        class=""
        style="margin: 20rpx 28rpx; background: #fff; border-radius: 12rpx; display: flex; align-items: center; padding: 34rpx 27rpx; position: relative"
        v-for="m in i.doctor_list"
        @tap="tech(m.doctor_id)"
      >
        <image :src="m.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border-radius: 50%"></image>
        <view class="" style="padding-left: 26rpx">
          <view class="">
            <text style="font-size: 32rpx">{{ m.doctor_name }}</text>
            <text style="font-size: 26rpx; color: #666666; padding-left: 19rpx">{{ m.doctor_title }}</text>
          </view>
          <view class="" style="font-size: 26rpx; display: flex">
            <view>{{ m.department_name }}</view>
            <view style="padding-left: 31rpx; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; width: 250rpx">
              {{ m.hospital_name }}
            </view>
          </view>
        </view>
        <view
          class=""
          style="
            width: 80rpx;
            height: 38rpx;
            background: #fff0cc;
            border-radius: 12rpx;
            color: #8d541c;
            font-size: 24rpx;
            text-align: center;
            line-height: 38rpx;
            position: absolute;
            top: 0;
            right: 0;
          "
        >
          {{ m.level_name }}
        </view>
      </view>
      <!-- 滑动区域 -->
      <view class="">
        <scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y" style="white-space: nowrap">
          <view class="" style="display: flex; align-items: center">
            <view
              :class="i.color == 0 ? 'se' : i.color == 1 ? 'se1' : 'se2'"
              style="width: 450rpx; border-radius: 12rpx; margin-left: 28rpx; padding-bottom: 20rpx"
              v-for="n in i.disease"
            >
              <view class="" style="font-size: 28rpx; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 30rpx">
                <view class="">
                  {{ n.disease_name }}
                </view>
                <view class="">
                  <u-icon name="arrow-right" color="#fff" size="28"></u-icon>
                </view>
              </view>
              <!-- 医生 -->
              <view
                class=""
                style="margin: 20rpx 28rpx; background: #fff; border-radius: 12rpx; display: flex; align-items: center; padding: 27rpx 19rpx; position: relative"
                v-for="s in n.doctor_list"
                @tap="tech(s.doctor_id)"
              >
                <view class="" style="width: 80rpx; height: 80rpx">
                  <image :src="s.doctor_avatar" mode="aspectFill" style="width: 80rpx; height: 80rpx; border-radius: 50%"></image>
                </view>

                <view class="" style="padding-left: 14rpx">
                  <view class="">
                    <text style="font-size: 28rpx">{{ s.doctor_name }}</text>
                    <!-- <text style="font-size: 24rpx;color: #666666;padding-left: 19rpx;">{{s.doctor_title}}</text> -->
                  </view>
                  <view class="" style="font-size: 24rpx; display: flex">
                    <text>{{ s.department_name }}</text>
                    <view style="padding-left: 25rpx; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; width: 120rpx">
                      {{ s.hospital_name }}
                    </view>
                  </view>
                </view>
                <view
                  class=""
                  style="
                    width: 69rpx;
                    height: 32rpx;
                    background: #fff0cc;
                    border-radius: 12rpx;
                    color: #8d541c;
                    font-size: 22rpx;
                    text-align: center;
                    line-height: 32rpx;
                    position: absolute;
                    top: 0;
                    right: 0;
                  "
                >
                  {{ s.level_name }}
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 皮肤科 -->
    <!-- <view class="" style="margin: 26rpx 28rpx;background: #7CAAE1;border-radius: 20rpx;padding-bottom: 34rpx;">
			<view class=""
				style="font-size: 36rpx;color: #fff;font-weight: bold;text-align: center;padding-top: 34rpx;">
				皮肤科
			</view>
			<view class=""
				style="display: flex;align-items: center;justify-content: space-between;padding: 20rpx 28rpx;font-size: 28rpx;color: #fff;">
				<view class="">
					皮肤科明星明细
				</view>
				<view class="">
					<u-icon name="arrow-right" color="#fff" size="26" label="全部" label-pos="left" label-color="#fff">
					</u-icon>
				</view>
			</view>
			
			<view class=""
				style="margin: 20rpx 28rpx;background: #fff;border-radius: 12rpx;display: flex;align-items: center;padding: 34rpx 27rpx;position: relative;"
				v-for="i in 3">
				<image src="../../static/avar.jpg" mode="" style="width: 112rpx;height: 112rpx;border-radius: 50%;">
				</image>
				<view class="" style="padding-left: 26rpx;">
					<view class="">
						<text style="font-size: 32rpx;">许三多</text>
						<text style="font-size: 26rpx;color: #666666;padding-left: 19rpx;">主任医师</text>
					</view>
					<view class="" style="font-size: 26rpx;">
						<text>皮肤科</text>
						<text style="padding-left: 31rpx;">河南大学第一附属医院</text>
					</view>
				</view>
				<view class=""
					style="width: 80rpx;
		height: 38rpx;
		background: #FFF0CC;
		border-radius: 12rpx;color: #8D541C;font-size: 24rpx;text-align: center;line-height: 38rpx;position: absolute;top: 0;right: 0;">
					三甲
				</view>

			</view>
			
			<view class="">
				<scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y" style="white-space: nowrap;">
					<view class="" style="display: flex;align-items: center;">
						<view class=""
							style="width: 450rpx;background: #ABCBF2;border-radius: 12rpx;margin-left: 28rpx;padding-bottom: 20rpx;"
							v-for="i in 5">
							<view class=""
								style="font-size: 28rpx;color: #fff;display: flex;align-items: center;justify-content: space-between;padding: 30rpx;">
								<view class="">
									痤疮诊治明星医生
								</view>
								<view class="">
									<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
								</view>
							</view>
							
							<view class=""
								style="margin: 20rpx 28rpx;background: #fff;border-radius: 12rpx;display: flex;align-items: center;padding: 27rpx 19rpx;position: relative;"
								v-for="i in 3">
								<view class="" style="width: 80rpx;height: 80rpx;">
									<image src="../../static/avar.jpg" mode=""
										style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
								</view>

								<view class="" style="padding-left: 14rpx;">
									<view class="">
										<text style="font-size: 28rpx;">许三多</text>
										<text style="font-size: 24rpx;color: #666666;padding-left: 19rpx;">主任医师</text>
									</view>
									<view class="" style="font-size: 24rpx;">
										<text>皮肤科</text>
										<text style="padding-left: 25rpx;">河南大学第一...</text>
									</view>
								</view>
								<view class=""
									style="width: 69rpx;
										height: 32rpx;
										background: #FFF0CC;
										border-radius: 12rpx;color: #8D541C;font-size: 22rpx;text-align: center;line-height: 32rpx;position: absolute;top: 0;right: 0;">
									三甲
								</view>

							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</view> -->
    <!-- 皮肤科 -->
    <!-- <view class="" style="margin: 26rpx 28rpx;background: #5BAEAD;border-radius: 20rpx;padding-bottom: 34rpx;">
			<view class=""
				style="font-size: 36rpx;color: #fff;font-weight: bold;text-align: center;padding-top: 34rpx;">
				皮肤科
			</view>
			<view class=""
				style="display: flex;align-items: center;justify-content: space-between;padding: 20rpx 28rpx;font-size: 28rpx;color: #fff;">
				<view class="">
					皮肤科明星明细
				</view>
				<view class="">
					<u-icon name="arrow-right" color="#fff" size="26" label="全部" label-pos="left" label-color="#fff">
					</u-icon>
				</view>
			</view>
			
			<view class=""
				style="margin: 20rpx 28rpx;background: #fff;border-radius: 12rpx;display: flex;align-items: center;padding: 34rpx 27rpx;position: relative;"
				v-for="i in 3">
				<image src="../../static/avar.jpg" mode="" style="width: 112rpx;height: 112rpx;border-radius: 50%;">
				</image>
				<view class="" style="padding-left: 26rpx;">
					<view class="">
						<text style="font-size: 32rpx;">许三多</text>
						<text style="font-size: 26rpx;color: #666666;padding-left: 19rpx;">主任医师</text>
					</view>
					<view class="" style="font-size: 26rpx;">
						<text>皮肤科</text>
						<text style="padding-left: 31rpx;">河南大学第一附属医院</text>
					</view>
				</view>
				<view class=""
					style="width: 80rpx;
		height: 38rpx;
		background: #FFF0CC;
		border-radius: 12rpx;color: #8D541C;font-size: 24rpx;text-align: center;line-height: 38rpx;position: absolute;top: 0;right: 0;">
					三甲
				</view>

			</view>
			
			<view class="">
				<scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y" style="white-space: nowrap;">
					<view class="" style="display: flex;align-items: center;">
						<view class=""
							style="width: 450rpx;background: #88D6D5;border-radius: 12rpx;margin-left: 28rpx;padding-bottom: 20rpx;"
							v-for="i in 5">
							<view class=""
								style="font-size: 28rpx;color: #fff;display: flex;align-items: center;justify-content: space-between;padding: 30rpx;">
								<view class="">
									痤疮诊治明星医生
								</view>
								<view class="">
									<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
								</view>
							</view>
							<view class=""
								style="margin: 20rpx 28rpx;background: #fff;border-radius: 12rpx;display: flex;align-items: center;padding: 27rpx 19rpx;position: relative;"
								v-for="i in 3">
								<view class="" style="width: 80rpx;height: 80rpx;">
									<image src="../../static/avar.jpg" mode=""
										style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
								</view>

								<view class="" style="padding-left: 14rpx;">
									<view class="">
										<text style="font-size: 28rpx;">许三多</text>
										<text style="font-size: 24rpx;color: #666666;padding-left: 19rpx;">主任医师</text>
									</view>
									<view class="" style="font-size: 24rpx;">
										<text>皮肤科</text>
										<text style="padding-left: 25rpx;">河南大学第一...</text>
									</view>
								</view>
								<view class=""
									style="width: 69rpx;
										height: 32rpx;
										background: #FFF0CC;
										border-radius: 12rpx;color: #8D541C;font-size: 22rpx;text-align: center;line-height: 32rpx;position: absolute;top: 0;right: 0;">
									三甲
								</view>

							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</view> -->
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      getlist: [],
      scrollTop: 0,
      list: [],
      current: 1
    };
  },
  //方法
  methods: {
    zhuan() {
      this.api({
        url: '/api/doctor/getExpertList',
        method: 'post',
        data: {
          type: 2
        }
      }).then((res) => {
        this.getlist = res.data.list001;
        this.list = res.data.list002;
      });
    },
    tech(e) {
      uni.navigateTo({
        url: '/doctor/doctor/doctor?id=' + e
      });
    }
  },
  //首页渲染
  onLoad(options) {
    this.zhuan();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
.on {
  width: 10rpx;
  height: 10rpx;
  background: #ffa838;
  opacity: 0.2;
  border-radius: 50%;
}

.on1 {
  width: 10rpx;
  height: 10rpx;
  background: #ffa838;
  opacity: 0.5;
  border-radius: 50%;
}

.on2 {
  width: 10rpx;
  height: 10rpx;
  background: #ffa838;
  border-radius: 50%;
}

.btn {
  width: 140rpx;
  height: 41rpx;
  background: #fff1e5;
  border-radius: 4rpx;
  text-align: center;
  line-height: 41rpx;
  font-size: 24rpx;
  color: #ff801e;
}
.ns {
  background: #fbbf72;
}
.ns1 {
  background: #7caae1;
}
.ns2 {
  background: #5baead;
}
.se {
  background: #ffd6a1;
}
.se1 {
  background: #abcbf2;
}
.se2 {
  background: #88d6d5;
}
</style>
